<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
    <style>
        .title-one {
            height: 60px;
            background-image: url(./images/schoollogo.png);
            background-size: 200px;
            background-repeat: no-repeat;
            background-position: 50px center;
            background-color: rgb(224, 229, 243);
        }

        .title-two {
            margin-left: 600px;
            width: 500px;
            height: 60px;
            /* background-color: blue; */
            line-height: 60px;
            color: rgb(2, 109, 173);
            display: inline-block;
            overflow: hidden;
        }

        .title-three {
            font-size: 20px;
            /* background-color: white; */
            height: 60px;
            width: 200px;
            display: inline-block;
            color: rgb(2, 109, 173);
            margin-bottom: 20px;
            /* overflow: hidden; */
        }

        .title-four {
            background-color: rgb(224, 229, 243);
            height: 15px;
            overflow: hidden;
        }

        .sameline {
            text-align: center;
            line-height: 60px;
            color: rgb(2, 109, 173);
            background-image: url(./images/schoollogo.png);
            background-size: 200px;
            background-repeat: no-repeat;
            background-position: 50px center;
            background-color: rgb(224, 229, 243);
        }

        .box-one {
            width: 1920px;
            height: 859px;
            overflow: hidden;
            /* border-width: 5px;
            border-style: solid;
            border-color: rgb(2, 109, 173); */
            background-image: url(./images/sky.jpg);
        }

        .daily {
            width: 650px;
            height: 700px;
            background-color: rgba(2, 109, 173, 0.2);
            margin-top: 30px;
            margin-left: 50px;
            /* border-color: tomato; */
            border-radius: 10px;
            border: 5px solid rgba(2, 109, 173, 0.3);
            display: inline-block;
            overflow: hidden;
            /* text-align: center; */
            text-indent: 10px;
            color: white;
        }

        

        .number {
            width: 25px;
            height: 20px;
            margin-top: 10px;
            margin-left: 7px;

        }

        .button {
            color: white;
            background-color: blue;
            font-size: 15px;
            margin-left: 5px;
            margin-top: 10px;
            width: 75px;
            height: 35px;
        }

        .special {
            margin-left: 135px;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

    </style>
</head>

<body>
    <div class="title-one">
        <div class="title-two">
            <h1 class="first-line">电解槽异常工况检测系统</h1>
        </div>
        <div class="title-three">
            <div id="datetime">
                <script>
                    setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
                </script>
            </div>
            <div class="title-four">
            </div>
        </div>
    </div>
    <div class="box-one">
        <div class="daily" style="margin-left: 460px; margin-top: 150px; height:300px; width:550px;">
            <input type="text" value="Username" class="input-one" style="background-color: rgba(2, 109, 173, 0.3);
                    height: 50px; width: 500px;font-size: 40px;color:rgba(255, 255, 255, 0.719);margin-top: 30px;
                    border: rgba(2, 109, 173, 0.3);margin-left: 15px;">
            <input type="text" value="Password" class="input-one" style="background-color: rgba(2, 109, 173, 0.3);
                    height: 50px; width: 500px;font-size: 40px;color:rgba(255, 255, 255, 0.719);margin-top: 20px;
                    border: rgba(2, 109, 173, 0.3);margin-left: 25px;">
            <label><input type="radio" style="margin-left: 30px;margin-top: 30px;display: none;display: inline-block;
                    width: 20px; height: 20px;" value = "s1" ></input> </label>
            <span class = "span-style" style="font-size: 25px;color:rgba(255, 255, 255, 0.719)">Remember Me</span>
            <span class = "span-style" style="font-size: 25px;color:rgba(255, 255, 255, 0.719);margin-left: 180px;">Register</span>
            
            <button class="button-one" style="background-color: rgba(2, 109, 173, 0.75);border: rgba(2, 109, 173, 0.3);
                    height: 50px; width: 500px;font-size: 40px;color:rgba(255, 255, 255, 0.719);margin-left: 25px;
                    margin-top: 20px;">Login</button>
        </div>
    </div>

</body>

</html>